<template>
  <div class="cs-container">
    <div class="cs-title clear">
      <div class="left">登录日志</div>
      <div class="right"></div>
    </div>
    <div class="cs-content cs-table">
      <div class="form-tool">
        <el-form :inline="true" :model="form" size="mini">
          <el-form-item label="IP">
            <el-input v-model="form.name" placeholder="请输入IP" />
          </el-form-item>
          <!-- <el-form-item label="接口地址">
						<el-input v-model="form.uri" placeholder="请输入" />
          </el-form-item>-->
          <el-form-item>
            <el-button type="primary" size="mini" @click="query">查询</el-button>
            <el-button size="mini" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="data-table">
        <el-table
          :data="tableData"
          height="calc(100% - 60px)"
          style="width: 100%;"
          element-loading-text="加载中..."
          v-loading="loading"
        >
          <el-table-column prop="index" label="序号" width="50" align="center"></el-table-column>
          <el-table-column prop="account" label="账户" width="80" align="center"></el-table-column>
          <el-table-column prop="ip" label="IP" width="120" align="left"></el-table-column>
          <el-table-column prop="ip_region" label="归属地" width="170" align="left"></el-table-column>
          <el-table-column prop="request_path" label="地址"></el-table-column>
          <el-table-column label="登录方式" width="80">
            <template slot-scope="scope">
              <el-tag
                size="mini"
                :type="scope.row.login_type ? 'success' : 'info'"
              >{{scope.row.login_type}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="os" label="系统" width="100"></el-table-column>
          <el-table-column prop="browser" label="浏览器" width="100"></el-table-column>
          <el-table-column label="状态码" width="80">
            <template slot-scope="scope">
              <el-tag
                size="mini"
                :type="scope.row.status == 404 || scope.row.status == 500 ? 'danger' 
								: (scope.row.status == 302 || scope.row.status == 405)  ? 'warning' 
								: scope.row.status == 200  ? 'success' : 'info'"
              >{{scope.row.status}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="请求耗时" width="100">
            <template slot-scope="scope">
              <el-tag
                size="mini"
                :type="scope.row.time_taken < 3000 ? 'success' 
								: scope.row.time_taken >= 3000 && scope.row.time_taken < 10000 ? 'warning'
								: scope.row.time_taken >= 10000 ? 'danger' : 'info'"
              >{{scope.row.time_taken ? scope.row.time_taken + ' ms' : '0 ms'}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="create_time" label="访问日期" width="150"></el-table-column>
          <el-table-column label="操作" width="80">
            <template slot-scope="scope">
              <el-link type="primary" :underline="false" @click="preview(scope.row)">查看</el-link>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="cs-pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-sizes="pagination.pageSizes"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { getLogLogin } from '@/plugins/api/common'
export default {
  name: "ui",
  data() {
    return {
      form: {},
      tableData: [],
      loading: false,
      pagination: {
        currentPage: 1,
        pageSizes: [10, 20, 30, 40, 50, 100],
        pageSize: 10,
        total: 0
      }
    };
	},
	computed: {
	},
  mounted() {
    this.loadData();
  },
  methods: {
    /**
     * 查询
     */
    query() {
      this.pagination.currentPage = 1;
      this.loadData();
    },

    /**
     * 重置
     */
    reset() {
      this.form = {};
      this.loadData();
    },

    // 查看
    preview(map) {
      this.$utils.el.alert(map.userAgent);
    },

    /**
     * 加载数据
     */
    loadData() {
      this.loading = true;
      getLogLogin({
        needPage: true,
        currentPage: this.pagination.currentPage,
        pageSize: this.pagination.pageSize,
        ip: this.form.name
      }).then(response => {
        this.loading = false;
        this.tableData = [];
        this.pagination.total = response.total;
        response.rows.forEach((item, index_) => {
          item.index = (this.pagination.currentPage - 1) * this.pagination.pageSize + index_ + 1;
          item.login_type = item.login_type || "web";
          item.create_time = this.$utils.formatter
            .moment(item.create_time)
            .format("YYYY-MM-DD HH:mm:ss");
          item.update_time = this.$utils.formatter
            .moment(item.update_time)
            .format("YYYY-MM-DD HH:mm:ss");
          this.tableData.push(item);
        });
      });
    },

    /**
     * 每页多少条
     */
    handleSizeChange(val) {
      this.pagination.currentPage = 1;
      this.pagination.pageSize = val;
      this.loadData();
    },

    /**
     * 下一页
     */
    handleCurrentChange(val) {
      this.pagination.currentPage = val;
      this.loadData();
    }
  }
};
</script>

<style>
</style>